import { Suspense, lazy } from 'react';
import { Navigate, Outlet } from 'react-router-dom';

import { SvgIcon } from '@/components/icon';
import { CircleLoading } from '@/components/loading';

import { AppRouteObject } from '#/router';

const ListPage = lazy(() => import('@/pages/system/user'));
const OrganizationPage = lazy(() => import('@/pages/system/organization'));
const RolePage = lazy(() => import('@/pages/system/role'));
const MenuPage = lazy(() => import('@/pages/system/menu'));

const management: AppRouteObject = {
  order: 2,
  path: 'system',
  element: (
    <Suspense fallback={<CircleLoading />}>
      <Outlet />
    </Suspense>
  ),
  meta: {
    label: '系统管理',
    icon: <SvgIcon icon="ic-management" className="ant-menu-item-icon" size="24" />,
    key: '/system',
  },
  children: [
    {
      index: true,
      element: <Navigate to="user" replace />,
    },
    {
      path: 'user',
      element: <ListPage />,
      meta: { label: '用户列表', key: '/system/user' },
    },
    {
      path: 'organization',
      element: <OrganizationPage />,
      meta: { label: '组织管理', key: '/system/organization' },
    },
    {
      path: 'role',
      element: <RolePage />,
      meta: { label: '角色管理', key: '/system/role' },
    },
    {
      path: 'menu',
      element: <MenuPage />,
      meta: { label: '菜单管理', key: '/system/menu' },
    },
  ],
};

export default management;
